<!-- 交租方式 -->
<template>
  <div class="page">
    <navbar title="交租方式" backToApp></navbar>
    <layout-main>
      <header>
        <h1>选择您的交租方式</h1>
      </header>
      <div>
        <a v-bind:href="rentStageUrl"
          class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">房租月付</h4>
            <p class="weui-media-box__desc">申请租金分期，租房无压力</p>
          </div>
          <div class="weui-media-box__ft">
            <img class="weui-media-box__thumb" src="../assets/icon-calendar.png" alt="Icon calendar">
          </div>
        </a>
        <a
          v-on:click="editRent"
          href="javascript:;"
          class="weui-media-box weui-media-box_appmsg"
        >
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">普通付租</h4>
            <p class="weui-media-box__desc">足不出户，轻松完成</p>
          </div>
          <div class="weui-media-box__ft">
            <img class="weui-media-box__thumb" src="../assets/icon-rmb.png" alt="Icon RMB">
          </div>
        </a>
      </div>
    </layout-main>
  </div>
</template>

<script>
  import navbar from '../components/Navbar'
  import layoutMain from '../layout'

  import weui from 'weui.js'
  import ajax from '../assets/ajax.js'
  import $ from '../assets/util.js'

  export default {
    components: {
      navbar,
      layoutMain
    },
    data() {
      return {
        rentStageUrl: this.$store.state.rentStage.url // 租金分期需要再返回交租
      }
    },
    methods: {
      editRent() {
        $.editRent()
      }
    },
  }
</script>

<style lang="less" scoped>
  h1 {
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    padding: 24px 0;
  }

  .weui-media-box {
    background-color: #fff;
    &::before {
      left: 0;
    }
  }

  .weui-media-box__title {
    position: relative;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 12px;
    &::after {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 1px 1px 0 0;
      border-color: #808080;
      border-style: solid;
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
      top: 50%;
      left: 4em;
      margin-top: -3px;
    }
  }

  .weui-media-box__desc {
    font-size: 14px;
    color: #808080;
  }

  .weui-media-box__ft {
    width: 81px;
    height: 67px;
  }
</style>
